import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_echarts/flutter_echarts.dart';
import 'package:power_distribution_system/common/system_config.dart';

import '../../../bean/voiceprintmonitor_bean.dart';
import '../../../utils/tools/screenutil_tool.dart';

class ListEcharts extends StatelessWidget {
  List<VoiceprintmonitorBean> pageData;
  int len;

  ListEcharts(List<VoiceprintmonitorBean> data) {
    this.len = data.length;
    this.pageData = data;
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: len,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          decoration: BoxDecoration(
            color: Theme.of(context).backgroundColor,
            borderRadius: BorderRadius.all(Radius.circular(8)),
            boxShadow: [
              BoxShadow(
                offset: Offset(0, 2), //x,y轴
                color: Color.fromRGBO(0, 0, 0, .1),
                blurRadius: 3 //投影距离
              )
            ]
          ),
          margin: EdgeInsets.only(top: ST.seth(15),left: ST.setw(16),right: ST.setw(16)),
          padding:EdgeInsets.only(left: ST.seth(5),right: ST.seth(5),bottom: ST.seth(16)),
          child: renderEcharts(index, this.pageData),
        );
      },
    );
  }


  /// ### 根据数据（pageData）生成雷达图
  /// #### [index] int|必填|下标
  /// #### [pageData] List<VoiceprintmonitorBean>|必填|获取的数据
  Widget renderEcharts(int index, List<VoiceprintmonitorBean> pageData) {
    VoiceprintmonitorBean item = pageData[index];

    // 生成数据
    List<String> data = [
      item.runningState != null ? item.runningState : '0',
      item.energyRatio != null ? item.energyRatio : '0',
      item.soundPressureLevel != null ? item.soundPressureLevel : '0',
      item.oddEvenRatio != null ? item.oddEvenRatio : '0',
      item.complexity != null ? item.complexity : '0'
    ];

    // 计算最大范围值
    var maxRunningStatus = data[0] != null ? (double.parse(data[0]) > 3 ? data[0] : 3) : 0;
    var maxEnergyRatio = data[1] != null ? (double.parse(data[1]) > 0.4 ? data[1] : 0.4) : 0;
    var maxSoundPressureLevel = data[2] != null ? (double.parse(data[2]) > 80 ? data[2] : 80) : 0;
    var maxOddEvenRatio = data[3] != null ? (double.parse(data[3]) > 0.4 ? data[3] : 0.4) : 0;
    var maxComplexity = data[4] != null ? (double.parse(data[4]) > 3 ? data[4] : 3) : 0;

    return Column(
      children: [
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                item.sensorName,
                style: TextStyle(fontWeight: FontWeight.bold,fontSize: SystemConfig.fs_title3),
              ),
              Text(
                item.result,
                style: TextStyle(color: Colors.red, fontSize: SystemConfig.fs_title3),
              )
            ],
          ),
          height: ST.seth(80),
          padding: EdgeInsets.only(left: ST.setw(10), right: ST.setw(10))
        ),
        Container(
          color: Color.fromRGBO(3, 17, 52, 1),
          child: Echarts(
            option: '''
              {
                backgroundColor: '#021132',
                title: {
                  left: 'left',
                  textStyle: {
                    color: '#fff',
                    fontSize: 14,
                    fontWeight: 'normal'
                  }
                },
                tooltip: {},
                width: 350,
                radar: {
                    center: ['50%', '58%'],
                    splitNumber: 3,
                    name: {
                      textStyle: {
                        color: '#fff',
                        borderRadius: 1,
                        padding: [0, 0]
                      }
                    },
                    indicator: [
                      { name: '主变运行状态', max: ${jsonEncode(maxRunningStatus)} },
                      { name: '高频能量比', max: ${jsonEncode(maxEnergyRatio)} },
                      { name: '声压级', max: ${jsonEncode(maxSoundPressureLevel)} },
                      { name: '谐波比', max: ${jsonEncode(maxOddEvenRatio)} },
                      { name: '复杂度', max: ${jsonEncode(maxComplexity)} }
                    ],
                    splitArea: {
                      areaStyle: {
                        color: [
                          'rgba(142,62,41, 1)',
                          'rgba(181,117,45, .9)',
                          'rgba(117,161,112, .9)'
                        ].reverse()
                      }
                    },
                    splitLine: {
                      lineStyle: {
                        width: 1,
                        color: [
                          'rgba(142,62,41, 1)',
                          'rgba(181,117,45, .9)',
                          'rgba(117,161,112, .9)'
                        ].reverse()
                      }
                    }
                },
                series: [
                  {
                    type: 'radar',
                    areaStyle: {
                      normal: {
                        color: 'rgba(252,255,255, .5)'
                      }
                    },
                    data: [{ value: ${jsonEncode(data)} }],
                    name: '实时数据情况',
                    lineStyle: { color: '#fff' }
                  }
                ]
              }
            ''',
          ),
          height: ST.seth(500),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: ST.setw(10),vertical: ST.seth(10)),
          child: Text('实时数据情况', style: TextStyle(fontWeight: FontWeight.bold, fontSize: SystemConfig.fs_title3)),
          alignment: Alignment.centerLeft,
        ),
        Wrap(children: buildTips(data))
      ],
    );

  }

  /// ### 生成雷达图下面的文本
  /// #### [items] List|必填|数组
  List<Widget> buildTips(List items) {
    List<Widget> res = [];
    for (var i = 0; i < items.length; i++) {
      String title = '';
      switch (i) {
        case 0:
          {
            title = '主变运行状态: ';
          }
          break;
        case 1:
          {
            title = '高频能量比: ';
          }
          break;
        case 2:
          {
            title = '声压级: ';
          }
          break;
        case 3:
          {
            title = '谐波比: ';
          }
          break;
        case 4:
          {
            title = '复杂度: ';
          }
          break;
      }
      res.add(
        Container(
          width: ST.setw(340),
          padding: EdgeInsets.symmetric(vertical: ST.seth(5)),
          child: Text(title + items[i],style: TextStyle(fontSize: SystemConfig.fs_Xsmall)),
        )
      );
    }

    return res;
  }

}